<template>
  <div class="container">
    <!-- <build-el-bread></build-el-bread> -->
    <div style="margin: 14px 0;" v-html="details.sequenceDescription"></div>
    <div
     
      class="w100 flex-row vote"
      v-loading="Boolean(tableData === null)"
    >
      <!-- <build-el-list-people
        v-for="item in tableData"
        :key="item.artistId"
        :titleImg="item._titleImg"
        :companyName="item.companyName"
        :artistPosition="item.artistPosition"
        :ticketNumber="item.ticketNumber"
        :artistName="item.artistName"
        :artist-id="item.artistId"
      ></build-el-list-people> -->
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="6" v-for="item in tableData" :key="item.artistId">
          <build-el-list-people
            :artistId="item.artistId"
            :titleImg="item._titleImg"
            :companyName="item.companyName"
            :artistPosition="item.artistPosition"
            :ticketNumber="item.ticketNumber"
            :artistName="item.artistName"
          ></build-el-list-people>
        </el-col>
      </el-row>
    </div>
    <!-- <el-pagination
        v-margin-top="'30px'"
        background
        :page-size="pageSize"
        :current-page="pageNow"
        layout="prev, pager, next"
        @current-change="changePage"
        :total="total"
    ></el-pagination>-->
    <div v-margin-top="'40px'"></div>
  </div>
</template>
<script>
import buildElBread from "@/components/build-el-bread";
import buildElListPeople from "@/components/build-el-list-people";

export default {
  components: {
    buildElBread,
    buildElListPeople,
  },
  data() {
    return {
      tableData: null,
      // total: 0,
      // pageSize:8,
      // pageNow: 1,
      details: {},
    };
  },
  async created() {
    let res = await this.api.findDownloadFile({ customizeId: 1 });
    this.details = res;
    await this.init(1);
  },
  methods: {
    async init(page) {
      this.tableData = [];
      let tableData = await this.api.findNewVoteArtistList();
      this.total = tableData.total;
      this.tableData = tableData.list;
      console.log("tableData", this.tableData);
    },
    changePage(e) {
      this.pageNow = e;
      this.init(e);
    },
  },
};
</script>
<style lang="less" scoped>
.container{
  text-align: left;
}
.vote {
  flex-wrap: wrap;
}
</style>
